<script lang="ts" setup>
import { computed } from 'vue'

import { useLineChart } from './composables/useLineChart'
import { modulationModeName } from './composables/useDecodeTable'

import type { MimoContent } from '@/apis/lab'
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface'

import PlotForm from './PlotForm.vue'

const props = defineProps<{
  reportID: number
  isPlotting: boolean
  plotContent?: MimoContent['plot']
}>()

const { figureRef } = useLineChart(
  computed(
    () =>
      props.plotContent?.result ?? [
        new Array(30).fill(0).map((_, x) => x - 10),
        new Array(30).fill(0)
      ]
  )
)

const data = computed(() => {
  return props.plotContent === undefined
    ? []
    : ([
        {
          label: '发射天线个数',
          value: '2'
        },
        {
          label: '接收天线个数',
          value: props.plotContent.args.receiveAntennas.toString()
        },
        {
          label: '调制方式',
          value: modulationModeName[props.plotContent.args.modulationMode]
        },

        {
          label: '运行次数',
          value: props.plotContent.args.counts.toString()
        }
      ] as const satisfies DescData[])
})
</script>

<template>
  <div class="bg-arco-2 pa-xs rounded flex flex-col">
    <ExperimentTitle
      icon="i-fluent-bezier-curve-square-12-regular"
      title="仿真图像"
      :status="plotContent === undefined ? 'empty' : isPlotting ? 'running' : 'resolved'"
    />
    <a-descriptions
      class="my-xs"
      :column="{ xs: 1, md: 2, lg: 4 }"
      size="small"
      :data="data"
      bordered
    >
      <template #title><span class="font-bold text-sm text-arco-2">上次运行参数</span></template>
    </a-descriptions>
    <div class="mt-xs grid grid-cols-1 lg:grid-cols-2 gap-xs">
      <PlotForm :isPlotting :reportID />
      <figure class="my-0 mx-auto" ref="figureRef" />
    </div>
  </div>
</template>
